<!-- 测试组件占位符 -->
<template>
  <view class="test-container">
    <view id="vditor1"></view>
    <button @click="getValue">获取值</button>
    <view id="vditor2"></view>
  </view>
</template>

<script setup>
import { onMounted } from "vue";
let contentEditor1 = null;
onMounted(() => {
  contentEditor1 = new Vditor("vditor1", {
    height: 360,
    toolbarConfig: {
      pin: true,
    },
    cache: {
      enable: false,
    },
    after: () => {
      contentEditor1.setValue("hello, Vditor + Vue!");
    },
  });
});

const getValue = () => {
  const value = contentEditor1?.getValue();
  console.log(value);
  Vditor.preview(document.querySelector("#vditor2"), value, {
    mode: "light",
    markdown: {
      toc: true,
      autoSpace: true,
      fixTermTypo: true,
    },
    hljs: {
      style: "github-dark",
      lineNumber: true,
    },
    math: {
      engine: "KaTeX",
      inlineDigit: true,
    },
    speech: {
      enable: false,
    },
  });
};

onMounted(() => {});
</script>

<style scoped>
.test-container {
  padding: 60rpx 20rpx 20rpx;
  width: 100%;
  height: 500px;
}
</style>
